<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <!-- 左边 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 右边 -->
      <template #right>
        <van-button @click="$router.push('/search')" round icon="search">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <!-- v-model双向绑定选中的索引 -->
    <van-tabs v-model="active">
      <!-- 频道 -->
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <article-list :channel_id="item.id" />
      </van-tab>

      <!-- 图标 -->
      <div class="icon-box">
        <!-- 不规范的写法，但实际工作中怎么方便怎么来，所以实际工作中好多人都在用 -->
        <!-- <van-icon @click="$refs.channelEdit.show = true" name="wap-nav" /> -->
        <van-icon @click="editShow = true" name="wap-nav" />
      </div>
    </van-tabs>

    <!-- 频道管理 -->
    <!-- <channel-edit ref="channelEdit" :show="editShow" @update:show="editShow = $event"/> -->

    <!-- 
      .sync 其实是个语法糖
        如果你对某个数据加了.sync他会自动生成 @update:数据="绑定的值=$event"
        如何理解这句话？
          例如下面的数据叫  show="editShow",   我给加show加了.sync
          写成了  :show.sync="editShow"
          他就会自动生成 @update:show="editShow = $event"

      加入有个标签像如下写法
        <my-xx :msg.sync="num"  />
        他会生成
          <my-xx :msg="num" @update:msg="num=$event"
     -->
    <!-- <channel-edit 
      ref="channelEdit" 
      :show.sync="editShow"
      :ownList="ownList"
      :allList="allList"
      :value="active"
      @input="active = $event"
    /> -->

    <!-- 
      因为v-model的本质也是一个语法糖
        你写 v-model="数据" 他会自动帮你生成 :value="数据" 以及 @input="数据 = $event"
        所以，例如这里你写 v-model="active"
        它会生成 :value="active" 以及 @input="active = $event"
    -->
    <channel-edit
      ref="channelEdit"
      :show.sync="editShow"
      :ownList="ownList"
      :allList="allList"
      v-model="active"
    />
  </div>
</template>

<script>
// 导入接口
import { ownChannelAPI, allChannelAPI } from "@/api/channel";
// 导入组件
import ArticleList from "./ArticleList.vue";
import ChannelEdit from "./ChannelEdit.vue";
export default {
  name: "home",
  components: {
    ArticleList,
    ChannelEdit,
  },
  data() {
    return {
      active: 0,
      // 保存用户自己的频道
      ownList: [],
      allList: [],
      editShow: false,
    };
  },
  async created() {

    /*
    // 判断是否登录
    if (this.$store.state.tokenObj.token) {

      // 登录了
      // 发请求获取用户自己的频道
      const res1 = await ownChannelAPI();
      this.ownList = res1.data.channels;

    } else {

      // 没登录就要获取本地存储
      const local = JSON.parse(localStorage.getItem("channels"));
      if (local) {
        // 有就把本地存储的数组赋值给ownList
        this.ownList = local;
      } else {
        // 没有
        const res1 = await ownChannelAPI();
        this.ownList = res1.data.channels;
      }
    }
    */

    // 没登录就要获取本地存储
    const local = JSON.parse(localStorage.getItem("channels"));
    
      // 判断是否登录或者本地存储没数据
    if (this.$store.state.tokenObj.token || !local) {

      // 发请求获取用户自己的频道或默认频道
      const res1 = await ownChannelAPI();
      this.ownList = res1.data.channels;

    } else {
        // 代表没登录，而且本地存储有数据，就把本地存储的数据取出来
        // 有就把本地存储的数组赋值给ownList
        this.ownList = local;
    }

    // 发请求获取所有频道
    const res2 = await allChannelAPI();
    this.allList = res2.data.channels;
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  .logo {
    width: 120px;
    height: 46px;
    // 脚手架4，在css中不能直接用@，会解析失败
    // 脚手架4里要用 ~@ 才能代表src
    // 原因：@在less中特殊符号，代表声明变量，所以要做转义
    // 但是在脚手架5里，他会判断你的@在哪里写的，例如在路径里写的他就是代表src
    // 所以脚手架里可以直接用@
    // 在css里可以统一用~@，因为虽然脚手架5已经支持直接写@了，但是它也兼容以前的~@写法
    background: url(~@/assets/logo.png) no-repeat center / contain;
  }

  .van-button {
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    .van-icon-search {
      color: #fff;
    }
  }
}

.van-tabs {
  ::v-deep .van-tabs__nav {
    margin-right: 36px;
  }

  .icon-box {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
    .van-icon {
      font-size: 36px;
    }
  }
}
</style>